<template>
	<view class="page">
		<!-- 头部 -->
		<!-- #ifdef MP-WEIXIN -->
		<topVue>
			<view class="absolute-auto flex align-center">
				<text class="fw600 fs32">设置个人信息</text>
			</view>
		</topVue>
		<!-- #endif -->
		<view class="box" v-if="type == 1">
			<view style="font-weight: 600; font-size: 32rpx; color: #333333; margin-bottom: 68rpx">填写基本信息</view>
			<view style="font-weight: 400; font-size: 28rpx; color: #333333">请选择你的性别</view>
			<view class="flex-between1" style="padding: 100rpx">
				<view class="flex-center1" style="width: 176rpx; height: 176rpx; background: #9ec3ff; border-radius: 50%">
					<image src="@/static/login/man.png" style="width: 64rpx; height: 64rpx"></image>
				</view>
				<view class="flex-center1" style="width: 176rpx; height: 176rpx; background: #ff97b6; border-radius: 50%">
					<image src="@/static/login/woman.png" style="width: 64rpx; height: 64rpx"></image>
				</view>
			</view>
			<view class="fixed" style="width: 100%; bottom: 100rpx; left: 0">
				<view class="flex-center1" style="margin-bottom: 40rpx">
					<view style="font-weight: 400; font-size: 24rpx; color: #999999">注册后性别不能更改～</view>
				</view>
				<view class="flex-center1">
					<view class="flex-center1" style="width: 640rpx; height: 96rpx; background: #fc132f; border-radius: 48rpx; font-weight: 600; font-size: 32rpx; color: #ffffff">
						选好啦
					</view>
				</view>
			</view>
		</view>
		<view class="box" v-if="type == 2">
			<view style="font-weight: 600; font-size: 32rpx; color: #333333; margin-bottom: 68rpx">填写基本信息</view>
			<view style="font-weight: 400; font-size: 28rpx; color: #333333">请选择你的出生地</view>
			<view>
				<picker-view :indicator-style="indicatorStyle" :value="value" @change="bindChange" @pickstart="pickstart" @pickend="pickend" class="picker-view">
					<picker-view-column>
						<view class="item" v-for="(item, index) in provinces" :key="index">{{ item.label }}</view>
					</picker-view-column>
					<picker-view-column>
						<view class="item" v-for="(item, index) in citys" :key="index">{{ item.label }}</view>
					</picker-view-column>
					<picker-view-column>
						<view class="item" v-for="(item, index) in areas" :key="index">{{ item.label }}</view>
					</picker-view-column>
				</picker-view>
			</view>
			<view class="fixed" style="width: 100%; bottom: 100rpx; left: 0">
				<view class="flex-center1">
					<view class="flex-center1" style="width: 640rpx; height: 96rpx; background: #fc132f; border-radius: 48rpx; font-weight: 600; font-size: 32rpx; color: #ffffff">
						选好啦
					</view>
				</view>
			</view>
		</view>
		<view class="box" v-if="type == 3">
			<view style="font-weight: 600; font-size: 32rpx; color: #333333; margin-bottom: 68rpx">填写基本信息</view>
			<view style="font-weight: 400; font-size: 28rpx; color: #333333">请选择你的居住地</view>
			<view>
				<picker-view :indicator-style="indicatorStyle" :value="value" @change="bindChange" @pickstart="pickstart" @pickend="pickend" class="picker-view">
					<picker-view-column>
						<view class="item" v-for="(item, index) in provinces" :key="index">{{ item.label }}</view>
					</picker-view-column>
					<picker-view-column>
						<view class="item" v-for="(item, index) in citys" :key="index">{{ item.label }}</view>
					</picker-view-column>
					<picker-view-column>
						<view class="item" v-for="(item, index) in areas" :key="index">{{ item.label }}</view>
					</picker-view-column>
				</picker-view>
			</view>
			<view class="fixed" style="width: 100%; bottom: 100rpx; left: 0">
				<view class="flex-center1">
					<view class="flex-center1" style="width: 640rpx; height: 96rpx; background: #fc132f; border-radius: 48rpx; font-weight: 600; font-size: 32rpx; color: #ffffff">
						选好啦
					</view>
				</view>
			</view>
		</view>
		<view class="box" v-if="type == 4">
			<view style="font-weight: 600; font-size: 32rpx; color: #333333; margin-bottom: 68rpx">填写基本信息</view>
			<view style="font-weight: 400; font-size: 28rpx; color: #333333">请选择你的生日</view>
			<view>
				<picker-view :indicator-style="indicatorStyle" :value="value1" @change="bindChange" class="picker-view">
					<picker-view-column>
						<view class="item" v-for="(item, index) in years" :key="index">{{ item }}年</view>
					</picker-view-column>
					<picker-view-column>
						<view class="item" v-for="(item, index) in months" :key="index">{{ item }}月</view>
					</picker-view-column>
					<picker-view-column>
						<view class="item" v-for="(item, index) in days" :key="index">{{ item }}日</view>
					</picker-view-column>
				</picker-view>
			</view>
			<view class="fixed" style="width: 100%; bottom: 100rpx; left: 0">
				<view class="flex-center1">
					<view class="flex-center1" style="width: 640rpx; height: 96rpx; background: #fc132f; border-radius: 48rpx; font-weight: 600; font-size: 32rpx; color: #ffffff">
						选好啦
					</view>
				</view>
			</view>
		</view>
		<view class="box" v-if="type == 5">
			<view style="font-weight: 600; font-size: 32rpx; color: #333333; margin-bottom: 68rpx">填写基本信息</view>
			<view style="font-weight: 400; font-size: 28rpx; color: #333333">请选择你的身高(CM)</view>
			<view>
				<picker-view :indicator-style="indicatorStyle" :value="value2" @change="bindChange2" class="picker-view">
					<picker-view-column>
						<view class="item" v-for="(item, index) in height" :key="index">{{ item }}</view>
					</picker-view-column>
				</picker-view>
			</view>
			<view class="fixed" style="width: 100%; bottom: 100rpx; left: 0">
				<view class="flex-center1">
					<view class="flex-center1" style="width: 640rpx; height: 96rpx; background: #fc132f; border-radius: 48rpx; font-weight: 600; font-size: 32rpx; color: #ffffff">
						选好啦
					</view>
				</view>
			</view>
		</view>
		<view class="box" v-if="type == 6">
			<view style="font-weight: 600; font-size: 32rpx; color: #333333; margin-bottom: 68rpx">填写基本信息</view>
			<view style="font-weight: 400; font-size: 28rpx; color: #333333">请选择你的体重(KG)</view>
			<view>
				<picker-view :indicator-style="indicatorStyle" :value="value3" @change="bindChange3" class="picker-view">
					<picker-view-column>
						<view class="item" v-for="(item, index) in weight" :key="index">{{ item }}</view>
					</picker-view-column>
				</picker-view>
			</view>
			<view class="fixed" style="width: 100%; bottom: 100rpx; left: 0">
				<view class="flex-center1">
					<view class="flex-center1" style="width: 640rpx; height: 96rpx; background: #fc132f; border-radius: 48rpx; font-weight: 600; font-size: 32rpx; color: #ffffff">
						选好啦
					</view>
				</view>
			</view>
		</view>
		<view class="box" v-if="type == 7">
			<view style="font-weight: 600; font-size: 32rpx; color: #333333; margin-bottom: 68rpx">填写基本信息</view>
			<view style="font-weight: 400; font-size: 28rpx; color: #333333">我的行业/职业</view>
			<view>
				<picker-view :indicator-style="indicatorStyle" :value="value4" @change="bindChange4" class="picker-view">
					<picker-view-column>
						<view class="item" v-for="(item, index) in hangye" :key="index">{{ item }}</view>
					</picker-view-column>
				</picker-view>
			</view>
			<view class="fixed" style="width: 100%; bottom: 100rpx; left: 0">
				<view class="flex-center1">
					<view class="flex-center1" style="width: 640rpx; height: 96rpx; background: #fc132f; border-radius: 48rpx; font-weight: 600; font-size: 32rpx; color: #ffffff">
						选好啦
					</view>
				</view>
			</view>
		</view>
		<view class="box" v-if="type == 8">
			<view style="font-weight: 600; font-size: 32rpx; color: #333333; margin-bottom: 68rpx">填写基本信息</view>
			<view style="font-weight: 400; font-size: 28rpx; color: #333333">我的行业/职业</view>
			<view>
				<picker-view :indicator-style="indicatorStyle" :value="value5" @change="bindChange5" class="picker-view">
					<picker-view-column>
						<view class="item" v-for="(item, index) in xueli" :key="index">{{ item }}</view>
					</picker-view-column>
				</picker-view>
			</view>
			<view style="font-weight: 400; font-size: 28rpx; color: #333333">我的学校</view>
			<view class="">
				<input
					type="text"
					placeholder="请输入学校全称/其他"
					style="font-weight: 400; font-size: 28rpx; color: #999999; height: 100rpx; border-bottom: 1rpx solid #eeeeee"
				/>
			</view>
			<view class="fixed" style="width: 100%; bottom: 100rpx; left: 0">
				<view class="flex-center1">
					<view class="flex-center1" style="width: 640rpx; height: 96rpx; background: #fc132f; border-radius: 48rpx; font-weight: 600; font-size: 32rpx; color: #ffffff">
						选好啦
					</view>
				</view>
			</view>
		</view>
		<view class="box" v-if="type == 9">
			<view style="font-weight: 600; font-size: 32rpx; color: #333333; margin-bottom: 68rpx">填写基本信息</view>
			<view style="font-weight: 400; font-size: 28rpx; color: #333333">我的年收入区间(W)</view>
			<view>
				<picker-view :indicator-style="indicatorStyle" :value="value6" @change="bindChange6" class="picker-view">
					<picker-view-column>
						<view class="item" v-for="(item, index) in shouru" :key="index">{{ item }}</view>
					</picker-view-column>
				</picker-view>
			</view>
			<view class="fixed" style="width: 100%; bottom: 100rpx; left: 0">
				<view class="flex-center1">
					<view class="flex-center1" style="width: 640rpx; height: 96rpx; background: #fc132f; border-radius: 48rpx; font-weight: 600; font-size: 32rpx; color: #ffffff">
						选好啦
					</view>
				</view>
			</view>
		</view>
		<view class="box" v-if="type == 10">
			<view style="font-weight: 600; font-size: 32rpx; color: #333333; margin-bottom: 68rpx">填写基本信息</view>
			<view style="font-weight: 400; font-size: 28rpx; color: #333333">我的婚姻状况</view>
			<view>
				<picker-view :indicator-style="indicatorStyle" :value="value7" @change="bindChange7" class="picker-view">
					<picker-view-column>
						<view class="item" v-for="(item, index) in hunyin" :key="index">{{ item }}</view>
					</picker-view-column>
				</picker-view>
			</view>
			<view class="fixed" style="width: 100%; bottom: 100rpx; left: 0">
				<view class="flex-center1">
					<view class="flex-center1" style="width: 640rpx; height: 96rpx; background: #fc132f; border-radius: 48rpx; font-weight: 600; font-size: 32rpx; color: #ffffff">
						选好啦
					</view>
				</view>
			</view>
		</view>
		<view class="box" v-if="type == 11">
			<view style="font-weight: 600; font-size: 32rpx; color: #333333; margin-bottom: 68rpx">填写基本信息</view>
			<view style="font-weight: 400; font-size: 28rpx; color: #333333">我的兴趣爱好</view>
			<view class="flex-wrap" style="min-height: 200rpx">
				<view style="padding: 15rpx" v-for="(item, index) in interestList" :key="index">
					<view class="relative" style="background: rgba(252, 19, 47, 0.1); border-radius: 8rpx; padding: 18rpx 36rpx; font-size: 28rpx; color: #fc132f">
						{{ item }}
						<image
							class="absolute"
							@click="interestList.splice(index, 1)"
							src="@/static/login/detled.png"
							style="top: -10rpx; right: -15rpx; width: 35rpx; height: 35rpx"
						></image>
					</view>
				</view>
			</view>
			<view style="font-weight: 400; font-size: 28rpx; color: #333333">兴趣爱好</view>
			<view class="">
				<input
					type="text"
					v-model="interest"
					@confirm="ipt"
					@blur="ipt"
					placeholder="请填写你的兴趣爱好（最少三个）"
					style="font-weight: 400; font-size: 28rpx; color: #999999; height: 100rpx; border-bottom: 1rpx solid #eeeeee"
				/>
			</view>
			<view class="fixed" style="width: 100%; bottom: 100rpx; left: 0">
				<view class="flex-center1">
					<view class="flex-center1" style="width: 640rpx; height: 96rpx; background: #fc132f; border-radius: 48rpx; font-weight: 600; font-size: 32rpx; color: #ffffff">
						选好啦
					</view>
				</view>
			</view>
		</view>
		<view class="box" v-if="type == 12">
			<view style="font-weight: 600; font-size: 32rpx; color: #333333; margin-bottom: 68rpx">填写基本信息</view>
			<view style="font-weight: 400; font-size: 28rpx; color: #333333; margin-bottom: 100rpx">简短的话术介绍你的家庭</view>
			<view style="margin-bottom: 60rpx">
				<view style="font-weight: 400; font-size: 28rpx; color: #333333">个人简介</view>
				<view class="">
					<input
						type="text"
						placeholder="请输入话术介绍自己"
						style="font-weight: 400; font-size: 28rpx; color: #999999; height: 100rpx; border-bottom: 1rpx solid #eeeeee"
					/>
				</view>
			</view>
			<view style="margin-bottom: 60rpx">
				<view style="font-weight: 400; font-size: 28rpx; color: #333333">视频介绍（选填）</view>
				<u-upload :action="action" :file-list="fileList" max-count="1" upload-text="上传"></u-upload>
			</view>
			<view>
				<view style="font-weight: 400; font-size: 28rpx; color: #333333">家庭简介（选填）</view>
				<view class="">
					<input
						type="text"
						placeholder="请输入话术介绍自己的家庭"
						style="font-weight: 400; font-size: 28rpx; color: #999999; height: 100rpx; border-bottom: 1rpx solid #eeeeee"
					/>
				</view>
			</view>
			<view class="fixed" style="width: 100%; bottom: 100rpx; left: 0">
				<view class="flex-center1">
					<view class="flex-center1" style="width: 640rpx; height: 96rpx; background: #fc132f; border-radius: 48rpx; font-weight: 600; font-size: 32rpx; color: #ffffff">
						开启智遇
					</view>
				</view>
			</view>
		</view>
		<u-popup v-model="show" mode="center" @close="close">
			<view class="popupVue relative">
				<image src="../../static/index/activity.png" style="width: 292rpx; height: 278rpx; top: 0; z-index: 99" class="absolute-center"></image>
				<view class="popupContent absolute">
					<view class="title fw600 fs36 text-center">提示</view>
					<view class="text-center margin40" style="padding: 0 65rpx; line-height: 45rpx">
						恭喜你已完成基础资料 距离获得
						<text style="font-weight: 600">AI分析报告与AI会员</text>
						还差一步 前往AI婚恋生成分析报告
					</view>
					<view class="btnVue flex-between margin70">
						<view class="cancel" @click="show = false">下次再去</view>
						<view class="apply">立即前往</view>
					</view>
				</view>
			</view>
		</u-popup>
	</view>
</template>

<script>
import provinces from '@/common/province.js';
import citys from '@/common/city.js';
import areas from '@/common/area.js';
export default {
	data() {
		const date = new Date();
		const years = [];
		const year = date.getFullYear();
		const months = [];
		const month = date.getMonth() + 1;
		const days = [];
		const day = date.getDate();
		for (let i = 1900; i <= date.getFullYear(); i++) {
			years.push(i);
		}
		for (let i = 1; i <= 12; i++) {
			months.push(i);
		}
		for (let i = 1; i <= 31; i++) {
			days.push(i);
		}
		const height = [];
		for (let i = 140; i <= 220; i++) {
			height.push(i);
		}
		const weight = [];
		for (let i = 30; i <= 300; i++) {
			weight.push(i);
		}
		return {
			show: true,
			type: 12,
			//
			value: [0, 0, 0],
			indicatorStyle: `height: 50px;`,
			province: 0,
			city: 0,
			area: 0,
			//
			years,
			year,
			months,
			month,
			days,
			day,
			value1: [100, month - 1, day - 1],
			//
			height,
			value2: [20],
			//
			weight,
			value3: [20],
			//
			hangye: [
				'互联网/IT/科技',
				'金融/经济/财会',
				'教育/培训',
				'市场营销/广告/公关',
				'媒体/传媒/新闻',
				'销售/客服/商务',
				'法律/法务',
				'设计/创意',
				'管理/运营',
				'人力资源/行政',
				'其他专业服务'
			],
			value4: [1],
			//
			xueli: ['小学', '初中', '高中', '大专', '本科', '硕士研究生', '博士研究生', '其他'],
			value5: [2],
			//
			shouru: ['1-10', '10-20', '20-30', '30-50', '50以上'],
			value6: [0],
			//
			hunyin: ['未婚', '离异'],
			value7: [0],
			//
			interest: '',
			interestList: [],

			//
			fileList: [],
			action: 'http://www.example.com/upload'
		};
	},
	computed: {
		provinces() {
			return provinces;
		},
		citys: {
			get() {
				return citys[this.province];
			},
			set() {}
		},
		areas: {
			// 引用这几个变量，是为了监听其变化
			get() {
				return areas[this.province][this.city];
			},
			set() {}
		}
	},
	onLoad() {},
	methods: {
		close() {
			uni.showTabBar();
		},
		// 用户更改picker的列选项
		bindChange(e) {
			console.log(e.detail.value);
			this.province = e.detail.value[0];
			this.city = e.detail.value[1];
			this.area = e.detail.value[2];
			console.log(this.provinces[this.province], this.citys[this.city], this.areas[this.area]);
		},
		bindChange1(e) {
			const val = e.detail.value;
			this.year = this.years[val[0]];
			this.month = this.months[val[1]];
			this.day = this.days[val[2]];
			console.log(this.year, this.month, this.day);
		},
		bindChange2(e) {
			const val = e.detail.value;
			console.log(val);
		},
		bindChange3(e) {
			const val = e.detail.value;
			console.log(val);
		},
		bindChange4(e) {
			const val = e.detail.value;
			console.log(val);
		},
		bindChange5(e) {
			const val = e.detail.value;
			console.log(val);
		},
		bindChange6(e) {
			const val = e.detail.value;
			console.log(val);
		},
		bindChange7(e) {
			const val = e.detail.value;
			console.log(val);
		},
		ipt() {
			if (this.interest) {
				this.interestList.push(this.interest);
				this.interest = '';
			}
		},
		// 删除图片
		deletePic(event) {
			this[`fileList${event.name}`].splice(event.index, 1);
		},
		// 新增图片
		async afterRead(event) {
			// 当设置 multiple 为 true 时, file 为数组格式，否则为对象格式
			let lists = [].concat(event.file);
			let fileListLen = this[`fileList${event.name}`].length;
			lists.map((item) => {
				this[`fileList${event.name}`].push({
					...item,
					status: 'uploading',
					message: '上传中'
				});
			});
			for (let i = 0; i < lists.length; i++) {
				const result = await this.uploadFilePromise(lists[i].url);
				let item = this[`fileList${event.name}`][fileListLen];
				this[`fileList${event.name}`].splice(
					fileListLen,
					1,
					Object.assign(item, {
						status: 'success',
						message: '',
						url: result
					})
				);
				fileListLen++;
			}
		},
		uploadFilePromise(url) {
			return new Promise((resolve, reject) => {
				let a = uni.uploadFile({
					url: 'http://192.168.2.21:7001/upload', // 仅为示例，非真实的接口地址
					filePath: url,
					name: 'file',
					formData: {
						user: 'test'
					},
					success: (res) => {
						setTimeout(() => {
							resolve(res.data.data);
						}, 1000);
					}
				});
			});
		}
	}
};
</script>

<style lang="less" scoped>
/deep/.u-mode-center-box {
	background-color: transparent !important;
}
.popupVue {
	width: 600rpx;
	height: 700rpx;
	.popupContent {
		width: 600rpx;
		height: 600rpx;
		background: linear-gradient(180deg, #f0e9f8, #f0e9f8, #fde5e7, #fbeff1, #fdfafc, #fff);
		left: 0;
		bottom: 0;
		border-radius: 40rpx;
		.title {
			color: #333;
			padding-top: 178rpx;
		}
		.btnVue {
			padding: 0 50rpx;
			.cancel {
				width: 240rpx;
				height: 84rpx;
				line-height: 84rpx;
				text-align: center;
				border-radius: 42rpx;
				border: 1rpx solid #eeeeee;
				color: #999;
				font-weight: 600;
			}
			.apply {
				width: 240rpx;
				height: 84rpx;
				line-height: 84rpx;
				text-align: center;
				border-radius: 42rpx;
				background: #fc132f;
				border-radius: 42rpx;
				color: #fff;
				font-weight: 600;
			}
		}
	}
}
.page {
	.box {
		padding: 100rpx 34rpx;
	}
}
.picker-view {
	width: 100%;
	height: 600rpx;
	margin-top: 20rpx;
}
.item {
	line-height: 100rpx;
	text-align: center;
}
</style>
